<template>
  <div style="padding: 20px">
    <div class="info-fixed" v-if="fixedTF">
      <div class="info-div">
        <div class="info-div-div">
          <h1>信息完善成功</h1>
          <i class="el-icon-close"></i>
        </div>
        <div class="info-div1">
          已自动匹配《课程名称》
        </div>
        <div class="info-div1">
          课程费：20元/学时
        </div>
        <div class="info-div2" @click="experience">
          知道了
        </div>
      </div>
    </div>
    <el-card class="box-card" style="margin:0 auto;">
      <div slot="header" class="clearfix">
        <span>明德培训企业信息</span>
      </div>
      <div class="title">企业名称:<span>{{ list.companyName }}</span></div>
      <div class="title">统一社会信用代码:<span>{{ list.companyCode }}</span> </div>
      <div class="title">企业联系人:<span>{{ list.userName }}</span> </div>
      <div class="title">企业联系人电话:<span>{{ list.userPhone }}</span> </div>
      <div class=" title">行业:<span>{{dataForm.bigCategory}}-{{dataForm.smallCategory}}-{{dataForm.jutiCategory}}</span></div>
      <div class=" title">负责人姓名:<span>{{dataForm.principalName}} </span></div>
      <div class=" title">负责人电话:<span>{{dataForm.principalPhone}} </span></div>
      <div class=" title">管理人员姓名:<span>{{dataForm.adminName}}</span> </div>
      <div class=" title">管理人员电话:<span>{{dataForm.adminPhone}}</span> </div>
      <div class=" title">顾问姓名:<span>{{dataForm.counselorName}}</span>  </div>
      <div class=" title">顾问电话:<span>{{dataForm.counselorPhone}}</span>  </div>
      <div class=" title" v-if="dataForm.provinceName">企业地址:<span>{{dataForm.provinceName+'/'+dataForm.cityName+'/'+dataForm.areaName}}</span>  </div>
      <div class=" title">详细地址:<span>{{dataForm.totalPeopleNum}}</span>  </div>
      <div class=" title">企业总人数:<span>{{dataForm.totalPeopleNum}}</span>  </div>
      <div class=" title">劳动者职业总人数:<span>{{dataForm.totalJobPeopleNum}}</span>  </div>


    </el-card>
  </div>
</template>

<style>
  .info-content{
    display: flex;
  }

  .info-fixed{
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    z-index: 999;
  }
  .info-div{
    width:500px;
    height: 500px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .info-div-div{
    border-bottom: 1px solid #b5b5b5;
    display: flex;
    height: 100px;
    padding:0 20px;
    align-items: center;
    justify-content: space-between;
  }
  .info-div-div h1{
    font-size: 26px;
    color: #262626;
    font-weight: 500;
  }
  .info-div1{
    width: 100%;
    text-align: center;
    margin-top: 70px;
    font-size: 20px;
  }
  .info-div2{
    width:409px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
    margin: 0 auto;
    margin-top: 100px;
    background-color: #1679FB;
    height: 52px;
  }
  .constant{
    width: 100%;
  }
  .img{
    margin-top: 20px;
    width: 150px;
    height: 150px;
  }
  .img img{
    width: 100%;
    height: 100%;
  }
  .list{
    width: 100%;
  }
  .list-cell{
    width: 100%;
    line-height: 50px;
  }
  .cell{
    width: 100%;
    /*display: inline-flex;*/
  }
  .set{
    color: deepskyblue;
  }
  .line{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
    margin-bottom: 5px;
  }
  .erweima{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
  }
  .text {
    font-size: 14px;
  }

  .title {
    margin: 0px auto 20px auto;
    /*text-align: center;*/
    font-weight: bold;
  }
  .title span{
    font-weight: normal;
    margin-left: 5px;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 600px;
  }
</style>

<script>
  import { queryCompany} from '@/api/company'
  import { uploadPath } from '@/api/storage'
  import { getToken } from '@/utils/auth'
  import Pagination from '@/components/Pagination'
  import TagsView from '../layout/components/TagsView' // Secondary package based on el-pagination

  export default {
    name: 'CompleteInfoFunc',
    components: { TagsView, Pagination },
    data() {
      return {
        uploadPath,
        courseList: undefined,
        fixedTF:false,
        dataForm: {
          id: undefined,
          courseId: undefined,
          companyName: undefined,
          companyCode: undefined,
          companyAddress: undefined,
          logoPasswd: undefined,
          categoryName: undefined,
          userName: undefined,
          userPhone: undefined,
          categoryId: undefined,
          smallCategoryId: undefined,
          jutiCategoryId: undefined,
          counselorName: undefined,
          counselorPhone: undefined,
          principalName: undefined,
          principalPhone: undefined,
          adminName: undefined,
          adminPhone: undefined,
          payPeopleNum: undefined,
          unpayPeopleNum: undefined,
          totalPeopleNum: undefined,
          totalJobPeopleNum: undefined,
          deleteMark: undefined,
          createDate: undefined

        },
        courseAllListOne: undefined,
        courseAllList: undefined,
        industryCategoryList: undefined,
        industryCategoryParam: {
          pid: 0
        },
        industryCategoryAllList: undefined,
        bigCategory: undefined,
        smallCategory: undefined,
        jutiCategory: undefined,
        // dataForm: {
        //   categoryId: undefined,
        //   smallCategoryId: undefined,
        //   jutiCategoryId: undefined
        // },
        completeInfo: undefined, // 是否完善信息。0未完善，1已完善

        list: undefined,
        listLoading: true,
        dialogFormVisible: false,
        downloadLoading: false,

        reqParam:{
          companyId: undefined,
        }
      }
    },
    computed: {
      headers() {
        return {
          'X-Litemall-Admin-Token': getToken()
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init: function() {
        // if (this.$route.query.courseId != null||this.$route.query.courseId!=undefined) {
        //   this.reqParam.associatedIndustryId = this.initParam.associatedIndustryId = this.$route.query.associatedIndustryId
        // }
        if (this.$route.query.companyId == null) {
         return;
        }

        console.log("(this.$route.query.companyId——————————————————————"+(this.$route.query.companyId))
        this.reqParam.companyId=this.$route.query.companyId
        this.getData()
        this.list=''
        // this.queryIndustryCategory()
        // this.queryIndustryCategoryAll()
        // this.queryCourseAlls()
        // this.queryCity()
      },
      getData() {
        this.listLoading = true
        queryCompany(this.reqParam)
          .then(response => {
            this.dataForm = this.list = response.data.data
            this.completeInfo  = response.data.data.completeInfo
            this.listLoading = false
          })
          .catch(() => {
            this.list = undefined
            this.listLoading = false
          })
      },
      completeInfoFun() {
        if (this.completeInfo === 0) {
          this.$confirm('您的信息未完善, 是否跳转完善信息页面', '提示', {
            showClose: false,
            showCancelButton: false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.getCompleteInfo()
            this.$message({
              type: 'success',
              message: '跳转完善信息页面'
            })
          }).catch(() => {
            this.getCompleteInfo()
            // this.$message({
            //
            //   type: 'info',
            //   message: '跳转失败'
            // })
          })
        }
      },
      queryCity() {
        this.listLoading = true
        queryCityData()
          .then(response => {
            if (this.dataForm!=null||this.dataForm!=undefined){
              this.dataForm.companyAddress = response.data.data
            }

            this.listLoading = false
          })
          .catch(() => {
            // this.list = undefined
            this.listLoading = false
          })
      },

      queryIndustryCategory() {
        industryCategory(this.industryCategoryParam)
          .then(response => {
            this.industryCategoryList = response.data.data.items
          })
          .catch(() => {
            this.industryCategoryList = undefined
          })
      },

      queryIndustryCategoryAll() {
        industryCategoryAll()
          .then(response => {
            this.industryCategoryAllList = this.bigCategory = response.data.data
            // 接收数据并缓存
            for (var i in this.bigCategory) {
              if (this.dataForm.categoryId === this.bigCategory[i].id) {
                this.smallCategory = this.bigCategory[i].adminIndustryCategoryVos
                for (var j in this.smallCategory) {
                  if (this.dataForm.smallCategoryId === this.smallCategory[j].id) {
                    this.jutiCategory = this.smallCategory[j].adminIndustryCategoryVos
                  }
                }
              }
            }
          })
          .catch(() => {
            this.industryCategoryAllList = undefined
          })
      },

      resetForm() {
        this.dataForm = {
          id: this.companyId,
          courseId: undefined,
          companyName: undefined,
          companyCode: undefined,
          companyAddress: undefined,
          categoryName: undefined,
          logoPasswd: undefined,
          userName: undefined,
          userPhone: undefined,
          categoryId: undefined,
          smallCategoryId: undefined,
          jutiCategoryId: undefined,
          counselorName: undefined,
          counselorPhone: undefined,
          principalName: undefined,
          principalPhone: undefined,
          adminName: undefined,
          adminPhone: undefined,
          payPeopleNum: undefined,
          unpayPeopleNum: undefined,
          totalPeopleNum: undefined,
          totalJobPeopleNum: undefined,
          deleteMark: undefined,
          createDate: undefined
        }
      },

      updateData() {
        // this.$refs['dataForm'].validate(valid => {
        //   if (valid) {
        companyCompleteInfo(this.dataForm)
          .then(() => {
            // for (const v of this.list) {
            //   if (v.id === this.dataForm.id) {
            //     const index = this.list.indexOf(v)
            //     this.list.splice(index, 1, this.dataForm)
            //     break
            //   }
            // }
            this.dialogFormVisible = false
            this.$notify.success({
              title: '成功',
              message: '更新成功'
            })
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
        //   }
        // })
      },
      // 选择大分类
      choseBigCategory: function(e) {
        this.smallCategory = undefined // 重置数据
        this.dataForm.smallCategoryId = undefined // 重置选项
        this.jutiCategory = undefined // 重置数据
        this.dataForm.jutiCategoryId = undefined // 重置选项
        this.courseAllListOne = undefined // 重置课程
        this.dataForm.courseId = undefined // 重置课程
        for (var i in this.bigCategory) {
          if (e === this.bigCategory[i].id) {
            this.smallCategory = this.bigCategory[i].adminIndustryCategoryVos
            this.dataForm.smallCategoryId = this.smallCategory[0].id // 默认第一项
            this.jutiCategory = this.smallCategory[0].adminIndustryCategoryVos
            this.dataForm.jutiCategoryId = this.jutiCategory[0].id // 默认第一项
            // 筛选出符合条件的课程
            // for (var j in this.courseAllList) {
            //   if (e === this.courseAllList[j].categoryId) {
            //     this.courseAllListOne = this.courseAllList[j].adminCourseVos
            //   }
            // }
          }
        }
      },
      // 选择小分类
      choseSmallCategory: function(e) {
        this.jutiCategory = undefined
        this.dataForm.jutiCategoryId = undefined // 重置选项
        this.courseAllListOne = undefined // 重置课程
        this.dataForm.courseId = undefined // 重置课程
        for (var i in this.smallCategory) {
          if (e === this.smallCategory[i].id) {
            this.jutiCategory = this.smallCategory[i].adminIndustryCategoryVos
            this.dataForm.jutiCategoryId = this.jutiCategory[0].id  // 默认第一项
            // 筛选出符合条件的课程
            // for (var j in this.courseAllList) {
            //   if (e === this.courseAllList[j].categoryId) {
            //     this.courseAllListOne = this.courseAllList[j].adminCourseVos
            //   }
            // }
          }
          // console.log("  this.jutiCategory========="+  this.jutiCategory)
          // console.log("   this.dataForm.jutiCategoryId+++++++++++++++"+   this.dataForm.jutiCategoryId)
        }
      },
      // 选择具体行业
      choseJutiCategory: function(e) {
        for (var i in this.jutiCategory) {
          if (e === this.jutiCategory[i].id) {
            this.dataForm.jutiCategoryId = this.jutiCategory[i].id
            console.log(" this.dataForm.this.jutiCategory[i].categoryName++++++++++++"+ this.dataForm.jutiCategory[i].categoryName)
          }
        }
      },
      // completeInfoFunc() {
      //   companyCompleteInfo(this.dataForm)
      //     .then(response => {
      //       this.queryCourseParam.categoryId = response.data.data.categoryId
      //       this.queryCourse()
      //       this.dialogFormVisible = true
      //     })
      //     .catch(response => {
      //       this.$notify.error({
      //         title: '失败',
      //         message: response.data.message
      //       })
      //     })
      // },
      completeInfoFunc() {
        var that = this;
        companyCompleteInfo(this.dataForm)
          .then(response => {
            this.fixedTF= true;
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      },
      experience() {
        this.$router.push({ path: '/companyOperateManage/companyHome' })
      }
    }
  }
</script>
